<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03计算器练习</title>
</head>
<body>
<input type="text" id="i1"><br>
<input type="text" id="i2"><br>
<button onclick="calc('+')">加</button>
<button onclick="calc('-')">减</button>
<button onclick="calc('*')">乘</button>
<button onclick="calc('/')">除</button>
<h1>运算结果：<span id="s1"></span></h1>
    <script>
        function calc(o) {
            let i1 = document.getElementById('i1');
            let i2 = document.getElementById('i2');
            let s1 = document.querySelector('#s1');
            switch (o){
                case '+':
                    s1.innerHTML = parseFloat(i1.value) + parseFloat(i2.value);
                    console.log(parseFloat(i1.value) + parseFloat(i2.value));
                    break;
                case '-':
                    s1.innerHTML = parseFloat(i1.value) - parseFloat(i2.value)
                    console.log(parseFloat(i1.value) - parseFloat(i2.value));
                    break;
                case '*':
                    s1.innerHTML = parseFloat(i1.value) * parseFloat(i2.value)
                    console.log(parseFloat(i1.value) * parseFloat(i2.value));
                    break;
                case '/':
                    if (parseFloat(i2.value) === 0) {
                        alert('除数不能为0');
                        return;
                    }
                    s1.innerHTML = parseFloat(i1.value) / parseFloat(i2.value)
                    console.log(parseFloat(i1.value) / parseFloat(i2.value));
                    break;
                default:
                    break;
            }
        }
    </script>
</body>
</html>